<template>
  <div class="nav-wrapper">
    <el-card shadow="hover">
      <li v-for="i in $gbData.navs" :key="i.id" class="list">
        <nuxt-link to="/">{{ i.text }}</nuxt-link>
      </li>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {}
  }
})
</script>

<style scoped lang="scss">
.nav-wrapper {
  flex: 0 0 100px;
  .list {
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    text-align:center;
    cursor: pointer;
    &:last-child {
       margin-bottom: 0;
    }
    &:hover {
      border-bottom: 1px solid #eee;
    }
  }
}
</style>
